<%--
  Created by IntelliJ IDEA.
  User: Twinkle
  Date: 2020/11/23
  Time: 20:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page import="com.twinkle.bean.UserInfo" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/popper.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
</head>

<body class="bg-dark">
<%-- 变量 --%>
<%UserInfo userInfo = (UserInfo) session.getAttribute("para");%>
<%-- 导航栏 --%>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
    <a class="navbar-brand ml-lg-5" href="#">通讯录管理系统</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="btn nav-link" data-toggle="modal" data-target="#newContact">新建联系人</a>
            </li>
            <li class="nav-item">
                <a class="btn nav-link" href="${pageContext.request.contextPath}/selectAll">刷新</a>
            </li>
        </ul>
        <form class="form-inline ml-auto mr-lg-5" action="${pageContext.request.contextPath}/selectLike">
            <label>
                <input class="form-control mr-lg-2" type="search" name="search_name">
            </label>
            <button class="btn btn-outline-success my-2 my-lg-2" type="submit">搜索</button>
        </form>
        <ul class="navbar-nav mr-lg-5">
            <li class="nav-item">
                <a class="nav-link dropdown-toggle" href="#" id="navbar-drop-2"
                   data-toggle="dropdown"><%=userInfo.getUsername()%>
                </a>
                <div class="dropdown-menu dropdown-menu-lg-right">
                    <a class="dropdown-item" data-toggle="modal" data-target="#updatePassword" href="#">修改密码</a>
                    <a class="dropdown-item" href="#">关于我们</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" data-toggle="modal" data-target="#sign_out" href="#">退出登录</a>
                </div>
            </li>
        </ul>
    </div>
</nav>
<%-- 容器 --%>
<div class="container">
    <%-- 格式 --%>
    <div class="row justify-content-lg-center">
        <div class="col-lg-12" style="margin-top: 100px"></div>
    </div>
    <%-- 卡片组 --%>
    <div class="row justify-content-lg-center">
        <div class="col-lg-12">
            <div class="card-group">
                <%--@elvariable id="listAll" type="java.util.List"--%>
                <c:forEach var="list" items="${listAll}">
                    <div class="col-lg-4 mb-4 my-2">
                        <div class="card border-dark bg-white">
                            <div class="card-body">
                                    <%--                                <h4 class="card-title"><strong>${list.contacts_name}</strong></h4>--%>
                                <form role="form" action="${pageContext.request.contextPath}/update" method="post">
                                    <div class="form-group">
                                        <input type="hidden" class="form-control" id="up_id" name="up_id"
                                               value="${list.contacts_id}">
                                    </div>
                                    <div class="form-group">
                                        <div class="input-group-lg mb-3">
                                            <label for="up_name"></label>
                                            <input type="text" class="form-control"
                                                   id="up_name"
                                                   name="up_phone"
                                                   value="${list.contacts_name}"
                                                   style="font-weight: bolder">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="basic-addon1">电话</span>
                                            </div>
                                            <input type="text" class="form-control" name="up_phone" aria-label="phone"
                                                   aria-describedby="basic-addon1" value="${list.contacts_phone}">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="basic-addon2">邮箱</span>
                                            </div>
                                            <input type="text" class="form-control" name="up_email" aria-label="email"
                                                   aria-describedby="basic-addon2" value="${list.contacts_email}">
                                        </div>
                                    </div>
                                    <div class="card-footer">
                                        <button type="button" class="btn-outline-primary" data-toggle="modal"
                                                data-target="#updateContact">修改
                                        </button>
                                        <a type="button" class="btn-outline-danger"
                                           href="${pageContext.request.contextPath}/delete/${list.contacts_id}">删除</a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
    </div>
    <%-- 模态框 -> 新建联系人 --%>
    <div class="modal fade" id="newContact">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">新建联系人</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <form role="form" action="${pageContext.request.contextPath}/insert" method="post">
                        <div class="form-group">
                            <input type="hidden" class="form-control" id="co_id" name="co_id"
                                   value="<%=userInfo.getUserinfo_id()%>">
                        </div>
                        <div class="form-group">
                            <label for="co_name">姓名</label>
                            <input type="text" class="form-control" id="co_name"
                                   name="co_name">
                        </div>
                        <div class="form-group">
                            <label for="co_phone">电话</label>
                            <input type="text" class="form-control" id="co_phone"
                                   name="co_phone">
                        </div>
                        <div class="form-group">
                            <label for="co_email">邮箱</label>
                            <input type="text" class="form-control" id="co_email"
                                   name="co_email">
                        </div>
                        <br>
                        <button type="submit" class="btn btn-success btn-block btn-lg">提交
                        </button>
                        <br>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <%-- 模态框 -> 修改密码 --%>
    <div class="modal fade" id="updatePassword">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">修改密码</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <form role="form" action="${pageContext.request.contextPath}/updateUser" method="post">
                        <div class="form-group">
                            <input type="hidden" class="form-control" name="u_userid"
                                   value="<%=userInfo.getUserinfo_id()%>">
                        </div>
                        <div class="form-group">
                            <label for="u_username">账号</label>
                            <input type="text" class="form-control" id="u_username" name="u_username"
                                   value="<%=userInfo.getUsername()%>" readonly="readonly">
                        </div>
                        <div class="form-group">
                            <label for="u_password">密码</label>
                            <input type="text" class="form-control" id="u_password"
                                   name="u_password">
                        </div>
                        <br>
                        <button type="submit" class="btn btn-success btn-block btn-lg">修改</button>
                        <br>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <%-- 模态框 -> 退出登录 --%>
    <div class="modal fade" id="sign_out">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">你确定？？</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    是否确定退出登录？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <a type="button" class="btn btn-danger" href="${pageContext.request.contextPath}/sign_out">
                        Exit
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>